<template>
<div>
  <div class="yxp-wordList-mark" v-if="isCanTips || isCanEnd || isCanCleanWork"></div>
   <div class="word-pop" v-if="isCanTips">
      <!-- <img src="@/assets/word/close-icon.png" class="close" @click="handleTipClose"/> -->
      <div class="yxp-before-pop">
        <p class="text text-one">距离下课还有10分钟</p>
        <p class="text">请合理安排学习内容</p>
        <div class="btn" id="yxp-know" @click="handleTipClose">知道了</div>
      </div>
    </div>
    
      <div class="word-pop" v-if="isCanEnd">
        <!-- <img src="@/assets/word/close-icon.png" class="close" @click="handleTipClose"/> -->
        <div class="yxp-before-pop">
          <p class="text text-one">已下课</p>
          <p class="text">如有未提交作业请尽快提交</p>
          <p class="text">{{canAloneTime}}分钟后课堂将自动关闭</p>
          <div class="btn" id="yxp-know" @click="handleTipClose">知道了</div>
        </div>
      </div>
      <div class="word-pop" v-if="isCanCleanWork">
        <!-- <img src="@/assets/word/close-icon.png" class="close" @click="handleClean"/> -->
        <div class="yxp-before-pop">
          <p class="text text-one">已下课</p>
          <p class="text">如需继续学习，请联系老师排课</p>
          <div class="btn" id="yxp-know" @click="handleClean">知道了</div>
        </div>
      </div>
      <div class="timeshow" v-if="isCanShowTime">
         <span class="">距离课堂关闭还有：</span>
         <span class="color-red font-20">{{end_time | formatSencond2MinuteSencond}}</span>
      </div>
</div>
</template>
<script>
import axios from 'axios'
import { mapState, mapMutations } from "vuex";
export default {
  data () {
    return {
      isCanTips:false,
      isCanEnd:false,
      isCanCleanWork:false,
      CanTips:false,
      CanEnd:false,
      CanCleanWork:false,
      isCanShowTime:false,
      timer:null,
      timer2:null,
      timecountdown:0,
      end_time:0,
      canAloneTime:0,
    }
  },
  computed: {
  },
  created() {},
  mounted () {
    this.timecountdown = sessionStorage.getItem('work_end_time')
    this.canAloneTime = sessionStorage.getItem('after_out_time_min')
    this.end_time = sessionStorage.getItem('after_out_time_sec')
    let doubleminus_type = sessionStorage.getItem('doubleminus_type');
    this.CanCleanWork = sessionStorage.getItem('CanCleanWork')
    if(this.CanCleanWork == 1){
        this.isCanTips = false
        this.isCanEnd = false
        this.isCanCleanWork = true
    }
    this.CanEnd = sessionStorage.getItem('CanEnd')
    if(this.CanEnd == 1){
        this.isCanTips = false
        this.isCanEnd = true
    }
    this.CanTips = sessionStorage.getItem('CanTips')
    if(this.CanTips == 1){
        this.isCanTips = true
    }
      if(doubleminus_type == 2){//学习卡学员  不弹提示
         this.isCanTips = false
         this.isCanEnd = false
         this.isCanShowTime = false
         this.isCanCleanWork = false
         return false
      }
    this.startTimer()
  },
  methods: {
    startTimer() {
        this.timer = setInterval(this.enterInterval, 1000)
    },
    stopTimer() {
        clearInterval(this.timer)
    },
    startEndTimer() {
        this.timer2 = setInterval(this.enterInterval2, 1000)
    },
    stopEndTimer() {
        clearInterval(this.timer2)
    },
    CheckCanShow(){
      if (this.timecountdown == 600){
         console.log("CheckCanShow",this.isCanTips,this.timecountdown)
         this.isCanTips = true
         this.isCanShowTime=false;
         sessionStorage.setItem("CanCleanWork",0)
         sessionStorage.setItem("CanEnd",0)
         sessionStorage.setItem("CanTips",1)
      }else if(this.timecountdown == 0){
         this.isCanTips = false
         this.isCanEnd = true
         sessionStorage.setItem("CanCleanWork",0)
         sessionStorage.setItem("CanEnd",1)
         sessionStorage.setItem("CanTips",0)
         if(this.end_time >= 0)this.isCanShowTime = true
         this.timecountdown = 0
         this.stopTimer()
         this.startEndTimer()
      }else if(this.timecountdown < 0){
         this.startEndTimer()
         if(this.end_time >= 0)this.isCanShowTime = true
      }
      if(this.end_time > 0 && this.timecountdown <= 0){
         this.isCanShowTime = true
      }else{
          this.isCanShowTime = false
      }
    },
    CheckCanClean(){
      if(this.end_time == 0){
         this.isCanTips = false
         if(this.CanEnd == 0)this.isCanEnd = false
         this.isCanShowTime = true
         this.isCanCleanWork = true
      }else if(this.end_time < 0){
         this.isCanShowTime = false
         this.isCanCleanWork = true
      }
      if (this.end_time <= 0) {
        this.stopEndTimer()
         sessionStorage.setItem("CanCleanWork",1)
         sessionStorage.setItem("CanEnd",0)
         sessionStorage.setItem("CanTips",0)
      }
    },
    handleTipClose () {
         this.isCanTips = false
         this.isCanEnd = false
         if(this.timecountdown <= 0 && this.end_time > 0) this.isCanShowTime = true
         this.isCanCleanWork = false
         sessionStorage.setItem("CanCleanWork",0)
         sessionStorage.setItem("CanEnd",0)
         sessionStorage.setItem("CanTips",0)
    },
    handleClean() {
         this.handleTipClose()
         this.exitRoom()         
    },
    enterInterval (data) {
      this.timecountdown --
      this.CheckCanShow()
      sessionStorage.setItem("work_end_time",this.timecountdown)
      if (this.timecountdown <= 0) {
        this.stopTimer()
      }
    },
    enterInterval2 (data) {
      this.end_time --
      this.CheckCanClean()
      console.log(this.end_time)
      sessionStorage.setItem("after_out_time_min",this.canAloneTime)
      sessionStorage.setItem("after_out_time_sec",this.end_time)
    },
    exitRoom () {
      if(this.doubleminus){
        window.location.href = `${window.location.href.replace(new RegExp('pad/index.html.+$'), 'index.html')}#/`
      }else {
        window.location.href = `${window.location.href.replace(new RegExp('pad/index.html.+$'), 'index.html')}#/mycourse`
      }
    },
  },
}
</script>
<style lang='less' scoped>
.color-red{
   color: red;
}
.timeshow{
   position: absolute;
   right: 100px;
   bottom: 60px;
}
.word-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 600px;
  height: 380px;
  line-height: 50px;
  background: #fff;
  border-radius: 10px;
  z-index: 1100;
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  &-detail {
    width: 100%;
    height: 540px;
    text-align: left;
    margin-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    overflow: hidden;
    .content {
      width: 100%;
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar { width: 0 !important }
    }
  }
}
.word-pop{
   z-index: 1200;
}
.yxp-before-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 480px;
  height: 355px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  z-index: 1200;
  .text-one {
    margin-top: 59px;
    margin-bottom: 19px;
  }
  .text {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    img {
      width: 30px;
      height: 30px;
      margin-left: 10px;
      vertical-align: middle;
    }
  }
  .tips {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999;
    margin-top: 30px;
  }
  .btn {
    width: 350px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fff;
    background: #27BFA3;
    border-radius: 100px;
    margin: 40px auto 0;
    cursor: pointer;
    &:hover {
      background: #18A38A;
    }
  }
}
.yxp-wordList-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1111;
  background: rgba(0,0,0,.5);
}
</style>
